<template>
  <div class="header">
    <div class="mp-header">
      <router-link to="/" class="re"><span class="iconfont">&#xe666;</span></router-link>
      <h1>城市选择</h1>
    </div>
    <div class="mp-tab-con">
      <ul class="clearFix">
        <li class="fl">境内</li>
        <li class="fl">境外·港澳台</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {

  }
</script>
<style scoped>
  .header{
    width:100%;
    background: #00bcd4;
    position:fixed;
    z-index:1000;
  }
  .mp-header{
    position: relative;
    line-height: .44rem;
  }
  .mp-header>.re{
    position: absolute;
    left: 0;
    top:0;
    color:#fff;
  }
  .mp-header>.re>span{
    font-size: 0.26rem;
    padding:0 .1rem;
    display: block;
  }
  .mp-header>h1{
    text-align: center;
    font-size: .16rem;
    color:#fff;
    font-weight: normal;
  }
  .mp-tab-con{
    width:100%;
    background: #00bcd4;
    padding-bottom: .1rem;
  }
  .mp-tab-con>ul{
    border:solid 1px #fff;
    border-radius: .015rem;
    margin:0 .5rem;
  }
  .mp-tab-con>ul li{
    line-height: .2rem;
    font-size: .14rem;
    width:50%;
    text-align: center;
    color:#fff;
  }
  .mp-tab-con>ul li:nth-child(1){
    background: #fff;
    border-right: 1px solid #fff;
    box-sizing: border-box;
    color: #00bcd4;
  }
</style>
